<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon"
	href="http://yzimg.jyymatrix.cc/uploadeFile/image/20180603/logo_899.ico">
<title>智云CMS建站系统</title>
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
<style type="text/css">
.page_bar {
	    height: 40px;
    width: 350px;
    margin: 10px auto;
    font-size: 15px;
	background: #000;
}

.box {

	color: #000;
	background: #000;
	border: 2px solid;
}

.page_iframe {
	width: 100%;
	height: 100%;
	overflow: scroll;
	border: none;
}
	.mobile{
		width: 375px;
		height: 667px;
		border: 5px solid #f1f1f1;
		margin: 50px auto;
display: block;
	}
	 
</style>
</head>

<body  >
<div class="box">
	<div class="page_bar">
	<div class="btn-group  " data-for="search-text">
								<button type="button" id="pcname"
									class="btn  btn-sm btn-default dropdown-toggle "
									data-toggle="dropdown">
									电脑网站 <span class="caret "></span>
								</button>
								<ul class="dropdown-menu" role="menu" style="line-height: 30px;">
									<li onclick="changeQueryParam(1,'电脑网站')"><a><i class="fa fa-desktop" aria-hidden="true"></i> 电脑网站</a></li>
									<li onclick="changeQueryParam(2,'手机网站')"><a><i style="font-size:20px;" class="fa fa-mobile" aria-hidden="true"></i> 手机网站</a></li>
								</ul>
							</div>
		<select style="width: 200px; display: inline-block;text-align: left;" class="select2 form-control "  name="parentId" id="parentId">
		</select>
		<div class="" style="line-height: 35px;display: inline-block;" >  </div>
		<button class="btn btn-info btn-sm "  onclick="view()" target="blank" >预览</button>
	</div>
</div>

	<iframe id="page_iframe" src="" class="page_iframe " onload="pageload()"></iframe>



</body>
<script type="text/javascript"
	src="${path }/resource/js/systools/MJsBase.js"></script>


<script type="text/javascript">

	var $iframe=$("#page_iframe");
	$(".select2").select2();
	function view(){
		window.open($iframe.attr("src"));
	}
	
	
    var queryParam={"tempType":1};
    $selectPage=$("#parentId");

    $selectPage.change(function() {
        layer.load(2, {
            time : 10 * 1000,
            shade : [ 0.4, '#aeaeae' ]
        });
        $iframe.attr("src",  "${path}" +  "/"+ $selectPage.find("option:selected").data("temppath"));
    });


    /**
     *  修改导航栏类型
     */
    function changeQueryParam(type,node){
    	$("#pcname").html(node);
        queryParam={"tempType":type};
        if(type==1){
            $iframe.removeClass("mobile");
        }else{
            $iframe.addClass("mobile");
        }
        initFunctionList();
    }

	initFunctionList();
	//$(".select2").select2();
	
	function initFunctionList() {
		$.AjaxProxy({p:queryParam}).invoke("${path }/do/admin/webTemplate/showAll", function(loj) {
			if(loj.getRowCount()<1){
				//没有查询到模板记录
				 $iframe.attr("src",  "${path}/do/admin/redirect/web/empty-template");
				 $selectPage.html("");
				return;
			}
			
            $selectPage.createSelectTree(loj.attr("result").rows, {
				id : "id", // 选项的值
				parent : "", // 父节点值
				value : "tempName", // 要显示的名称
				append : false,
				defaultHtml : '',
				extendAttr:'tempPath'
			});
			layer.load(2, {
				time : 10 * 1000,
				shade : [ 0.4, '#aeaeae' ]
			});
            $iframe.attr("src",  "${path}" +  "/"+ $selectPage.find("option:selected").data("temppath"));

		});


	}

	function pageload() {
		console.log("加载界面初始化元素");
		
		
        $iframe.contents().find("a").click(function(event) {
            console.log("阻止a事件");
			return false;
		});

        //阻止mui中的事件跳转
        if($iframe[0].contentWindow.mui){
            $iframe[0].contentWindow.mui("body").off('tap','a');
		}



		//点击编辑事件
        $iframe.contents().find(".zy").click(function() {
			var zy = $(this);
			var type=zy.data('type');
			
			if("IMG"==zy[0].tagName || "A"==zy[0].tagName ||"ad"!=type){
				editPage[zy.data('type')](zy.data('id'));
			}else{
				zy.attr("contenteditable","true");
				var id=zy.data('id');
				var text=zy.text();
				console.log(text);
				zy.unbind("focusout");
				
				zy.focusout(function(){
					$.AjaxProxy({p:{
						"adId":id,
						"adTitle":$(this).text()
					}}).invoke("${path}/do/admin/webAd/addOrModify",function(loj){
						//layer.msg(loj.getValue("info"));
					});
				});
			}
		});

		//鼠标移动事件
        $iframe.contents().find(".zy").mouseover(function() {
			var zy = $(this);
			
			var offset = zy.offset();
						
			var width=zy.innerWidth();
			var height=zy.innerHeight();
			var border = zy.css("border");
			zy.data("border", border);
			zy.css("border", " 1px dashed #5b76d1");
			

		});

        $iframe.contents().find(".zy").mouseout(function() {
			var zy = $(this);
			zy.css("border", zy.data("border"));
		});
		layer.closeAll();
	}

	//对象编辑
	var editPage = {

		//广告位编辑
		ad : function(id) {
			this.layerOpen("编辑栏目内容", '${path }/do/admin/webAd/editForm?id='
					+ id);
		},

		//文章编辑
		art : function(id) {
			this.layerOpen("编辑文章", '${path }/do/admin/webArticle/editForm?id='
					+ id, '90%');
		},
		//编辑广告栏
		adc : function(id) {
			this.layerOpen("编辑广告栏",
					'${path }/do/admin/webAdcolumn/editForm?id=' + id);
		},
		//编辑导航栏
		nav : function(id) {
			this.layerOpen("编辑导航栏", '${path }/do/admin/webNav/editForm?id='
					+ id);
		},
		//打开弹出层
		layerOpen : function(title, url, width) {
			if (!width) {
				width = '800px';
			}
			layer.open({
				type : 2,
				title : title,
				shadeClose : true,
				closeBtn : 1, //不显示关闭按钮
				shade : [ 0 ],
				area : [ width, '100%' ],
				offset : 'lb', //左下角弹出
				anim : 2,
				maxmin : true,
				offset : 'r',
				content : [ url ]
				 
			});
		}

	}
	//共用保存弹窗回调函数
	var myGrid={
			serchData:function(){
                $iframe.attr("src",
						 "${path}" +  "/"+ $selectPage.find("option:selected").data("temppath"));
			}
	}
</script>







</html>